<!-- keepAlive -->
<template>
  <div class="noteClass">
    <h3>#概念</h3>
    <p>keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。</p>
    <h3>#作用</h3>
    <p>在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗</p>
    <p>应用场景: 多标签, 想要保留之前浏览状态的页面</p>
    <h3>#keep-alive的生命周期</h3>
    <p>初次进入时：created > mounted > activated；退出后触发 deactivated</p>
    <p>再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中</p>
    <p>PS: 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用, 使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。</p>
    <h3>#Props</h3>
    <p>include - 字符串(数组)或正则表达式。只有名称匹配的组件会被缓存。(匹配组件name)</p>
    <p>exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。</p>
    <p>max - 数字。最多可以缓存多少组件实例。</p>
    <pre v-highlight>
      <code class="lang-javascript">
          {{code2}}
      </code>
    </pre>
    <h3>#根据路由中meta内字段判断是否需要缓存</h3>
    <pre v-highlight>
      <code class="lang-javascript">
          {{code1}}
      </code>
    </pre>
  </div>
</template>

<script>
export default {
  name:'keepAlive',
  components: {},
  data() {
    return {
      code1:
      `<div id="app" class='wrapper'>
          <keep-alive>
              <!-- 需要缓存的视图组件 --> 
              <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
            <!-- 不需要缓存的视图组件 -->
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </div>`,
        code2:
        `
        <keep-alive include="home" exclude="edit" max="10">
            <router-view></router-view>
        </keep-alive>
        `
    };
  },
  methods: {
    
  },
  activated(){//在 keep-alive 组件激活时调用
    // console.log(1)
  }
}
</script>
<style scoped>

</style>